<template>
	<view class="guess-box" v-if="shopList.length > 0">
		<view>
			<scroll-view class="like-title-wrapper" scroll-with-animation="true" show-scrollbar="false" :scroll-x="maxDis > 0"
			 :scroll-left="titleLeft" @scroll="likeTitleScroll">
				<view class="like-title-box">
					<view class="item" v-for="(item, index) in title" :class="titleIndex == index ? 'active' : ''" :key='item.re_type'
					 @tap="selectType(index)">
						<view class="title">{{item.title}}</view>
						<view class="desc" v-if="!likeBoxFixed">{{item.desc}}</view>
						<!-- <view class="border" :style="titleIndex == index ? activeItemStyle : ''"></view> -->
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="list-wrapper" v-if="shopList[titleIndex]" @touchstart="touchStart" @touchend="touchEnd">
			<!-- <view id="promotion-shop" class="promotion-shop">
				<promotion-shop @handleCardClick='handlePromotionShopClick' :mainColor='mainColor'  v-for="(shop,index) in shopList[titleIndex].activity_list" :key='shop.activity_title+index' :content='shop'></promotion-shop>
			</view> -->
			<view v-if="title[titleIndex].re_type == 'shop_goods'">
				<view v-if="foodSortList.length!=0 && !likeBoxFixed" style="position: relative;">
					<!-- <view class="grid col-5 grid-square">
						<view class="bg-img" v-for="(item,index) in dataList" :key="index" @click="handleTagClick(item.sort_id)" :style="item.selected == '1' ? ('color: ' + mainColor+';background:'+mainColor+'20;'): ''">
							<text>{{item.sort_name}}</text>
						</view>
					</view> -->
					<!-- <tag-select :mainColor='mainColor' style="z-index: 999;" :list="foodSortList"  @handleTagClick='handleTagClick' :isFold='isFold'></tag-select> -->
					<view v-if="showTagMask" class="tag-show-mask" @click="tagMaskClick"></view>
				</view>
				<!-- :style="foodListStyle"   :style="likeBoxFixed ? foodListStyle : ''"-->
				<view id="foodList" class="foodList">
					<food-nearby @handleCardClick='handleFoodClick' class="food-content" v-for="(item,index) in shopList[titleIndex].list"
					 :key="index" :food='item'></food-nearby>
				</view>
			</view>
			<view v-else class="list-item" v-for="(item, index) in shopList[titleIndex].list" :key="'shopList-' + index">
				<view v-if="item.re_type == 'store'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box">
						<view class="name-box">
							<text class="name">{{item.store_name}}</text>
							<view class="store-tag" v-if="item.business_label.length > 0">
								<text class="group-tip" v-if="item.business_label[0] != ''">{{item.business_label[0]}}</text>
								<text class="food-tip" v-if="item.business_label[1] != ''">{{item.business_label[1]}}</text>
								<text class="appoint-tip" v-if="item.business_label[2] != ''">{{item.business_label[2]}}</text>
							</view>
						</view>
						<view style="display: flex; justify-content: space-between;">
							<view class="small desc">
								<text class="iconfont icon-star"></text>
								<text class="score">{{item.star}}</text>
							</view>
							<view class="red small right" v-if="item.score_get_percent && item.score_get_percent != '0'">
								<lang keywords='赠送' /> {{item.score_get_percent + '%'}}
								<lang keywords='积分' />
							</view>
						</view>
						<view class="small desc orange bottom">{{item.tip}}</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="item.url" data-url_title="店铺主页">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type == 'shop'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box">
						<view class="name-box">
							<text class="name">{{item.store_name}}</text>
							<!-- <text class='icon'>外卖</text> -->
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view class="line" v-if="item.is_advance">
							<view class="advance">
								<lang class="advance_left" :style="'background:' + mainColor" keywords="接受预订" chineseTxt="接受预订"></lang>
								<block v-if="item.next_date && (item.next_date.date || item.next_date.time)">
									<lang class="advance_right" v-if="item.deliver_type != 2" :style="'color:' + mainColor + ';border-color:' + mainColor"
									 keywords="X1后配送" :X1="item.next_date.date + ' ' + item.next_date.time" :chineseTxt="(item.next_date.date + ' ' + item.next_date.time) + '后配送'"></lang>
									<lang class="advance_right" v-else :style="'color:' + mainColor + ';border-color:' + mainColor" keywords="X1后自提"
									 :X1="item.next_date.date + ' ' + item.next_date.time" :chineseTxt="(item.next_date.date + ' ' + item.next_date.time) + '后自提'"></lang>
								</block>
							</view>
						</view>
						<view class="small desc desc-delivery">
							<view class="desc-1">
								<text class="iconfont icon-star"></text>
								<text class="score">{{item.star}}</text>
								<lang keywords="月售" :right="true"></lang>{{item.sale_count}}
							</view>
							<view class="desc-2">
								<!-- <text class="delivery-way" v-if="item.delivery_type == 1 || item.delivery_type == 2 || item.delivery_type == 4 || item.delivery_type == 5" style="bac">{{item.delivery_name}}</text>
								<text class="delivery-way" v-else :style="'color:#fff'+';background:'+mainColor" >{{item.delivery_name}}</text> -->
								<text class="delivery-way">{{item.delivery_name}}</text>
							</view>
						</view>
						<view class="rel flex flex-center mb5" v-if="item.deliver_time !== ''">
							<view class="small inline">
								<lang keywords="起送价" :right="true"></lang>
								{{currency}}
								<text>{{item.price_1}}</text>
							</view>
							<block v-if="config.config.shop_show_delivermoney">
								<text class="iconfont icon-line"></text>
								<view class="small inline">
									<lang keywords="配送费" :right="true"></lang>
									{{currency + item.price_2}}
								</view>
							</block>
							<view class='red small right inline' v-if="item.score_get_percent != '' && item.score_get_percent != '0'">
								<lang keywords='赠送' /> {{item.score_get_percent + '%'}}
								<lang keywords='积分' />
							</view>
						</view>
						<view class="discount-icon">
							<view :class="icon.type" v-for="(icon, index2) in item.info_arr" :key="index2">{{icon.text}}</view>
						</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type == 'meal'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box">
						<view class="name-box">
							<view class="name">{{item.store_name}}
								<!-- <text class='food-icon'>点餐</text> -->
							</view>
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view class="small desc">
							<text class="iconfont icon-star"></text>
							<text class="score">{{item.star}}</text>
						</view>
						<view class="rel flex flex-center flex-wrap">
							<text class="small bg" v-for="(label, index2) in item.business_label" :key="index2">{{label}}</text>
						</view>
						<view class="small desc orange">{{item.tip}}</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type && item.re_type == 'hotel'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box">
						<view class="name-box">
							<view class="name">{{item.store_name}}
								<!-- <text class='food-icon'>酒店</text> -->
							</view>
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view class="rel flex flex-center">
							<text class="iconfont icon-star"></text>
							<text class="score">{{item.star}}</text>
							<lang class="small" keywords="X1人消费" :X1="item.sale_count + '+'"></lang>
						</view>
						<view class="rel flex flex-center mb2">
							<text class="small">{{item.address}}</text>
							<view class="small right">
								<text class="green" v-for="(label, index2) in item.label" :key="index2">{{label}}</text>
							</view>
						</view>
						<view class="rel flex price-box">
							<text class="small red bold">{{currency}}</text>
							<text class="red now-price">{{item.price}}</text>
							<block v-if="item.price_up == 1">
								<lang class="small" keywords="起"></lang>
							</block>
							<text class="small right mt5 orange">{{item.tip}}</text>
						</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type && item.re_type == 'group'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box group">
						<view class="name-box">
							<view class="name">
								<text class="mr5">{{item.store_name}}</text>
								<block v-if="item.discount">
									<lang class="food-icon" keywords="超值"></lang>
								</block>
							</view>
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view v-if="item.score_get_percent != '' && item.score_get_percent != '0'" class="rel flex flex-center mb5">
							<view class="small desc" style="width: 50%;">{{item.name}}</view>
							<view class="red small right inline">
								<lang keywords='赠送' /> {{item.score_get_percent + '%'}}
								<lang keywords='积分' />
							</view>
						</view>
						<view v-else class="small desc">{{item.name}}</view>
						<view class="rel flex flex-center mb5 price-box">
							<text class="small red bold">{{currency}}</text>
							<text class="red now-price">{{item.price}}</text>
							<view class="small gray old-price inline">
								<lang keywords="门市价"></lang>:{{currency + item.old_price}}
							</view>
							<view class="small right mt5 inline">
								<lang keywords="月售" :right="true"></lang>{{item.sale_count}}
							</view>
						</view>
						<view class="discount-icon" v-if="item.info != ''">
							<text class="icon">{{item.info}}</text>
						</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
				<view v-if="item.re_type == 'pin_group'" class="shop-item border-b">
					<view class="shop-img">
						<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
						<block v-if="item.is_brand == 1">
							<lang class="img-tip" keywords="品牌甄选"></lang>
						</block>
					</view>
					<view class="info-box group">
						<view class="name-box">
							<view class="name">
								<text class="mr5">{{item.store_name}}</text>
								<lang class="food-icon" keywords="拼团"></lang>
							</view>
							<text class="small mt5 distance">{{item.range}}</text>
						</view>
						<view class="small desc">{{item.name}}</view>
						<view class="rel flex flex-center price-box mb2" style="justify-content: space-between;">
							<view>
								<text class="small red bold">{{currency}}</text>
								<text class="red now-price">{{item.price}}</text>
								<view class="small gray old-price inline">
									<lang keywords="门市价"></lang>:{{currency + item.old_price}}
								</view>
							</view>
							<view class="red small" v-if="item.score_get_percent != '' && item.score_get_percent != '0'">
								<lang keywords="赠送"></lang>{{item.score_get_percent + '%'}}
								<lang keywords="积分"></lang>
							</view>
							<!-- <text class='small right mt5'>月售{{item.sale_count}}</text> -->
						</view>
						<view class="news">
							<swiper class="news-swiper" vertical="true" autoplay="true" circular="true" interval="8000">
								<swiper-item class="flex">
									<!-- <text class='desc red'>已拼{{item.sale_count}}件</text> -->
									<lang class="desc red" keywords="已拼X1件" :X1="item.sale_count"></lang>
								</swiper-item>
								<swiper-item class="flex">
									<lang class="desc red" keywords="X1人正在拼团" :X1="item.sale_person"></lang>
								</swiper-item>
							</swiper>
							<view class="news-mask"></view>
						</view>
					</view>
					<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
						<button formType="submit" class="formidBtn"></button>
					</form>
				</view>
			</view>

			<view class="loading-tip" v-if="shopList[titleIndex].pageLoading" key="pageLoading">
				<lang keywords="加载中"></lang>
			</view>
			<!-- 	<view class="loading-tip" v-if="shopList[titleIndex].pageComplete" key="pageComplete">
				<lang keywords="没有更多数据了"></lang>
			</view> -->
		</view>
	</view>
</template>

<script>
	import foodNearby from '../platcommon/food-nearby-card.vue'
	import promotionShop from '../platcommon/promotion-shop-card.vue'
	import tagSelect from '../platcommon/tag-select.vue'
	var common = require('../../utils/common.js');
	var _this;
	var startX, startY, titltItemRect, systemInfo
	var titleX = 0
	export default {
		name: 'FavouredStore',
		components: {
			foodNearby,
			promotionShop,
			tagSelect
		},
		props: {
			// 猜你喜欢的标题
			title: {
				type: Array,
				default: function() {
					return []
				}
			},
			topH: {
				type: Number,
				default: 0
			},
			location: {
				type: Object,
				default: {
					lng: 0,
					lat: 0
				}
			},
			foodSortList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				shopList: {},
				lng: 0,
				lat: 0,
				config: '',
				// 标题内容区域宽度
				likeBoxWidth: '',
				likeBoxRect: '',
				// 店铺id集合
				shopIdStr: '',
				titleIndex: 0,
				mainColorBg: '',
				mainColorFont: '',
				// 标题可滑动的最大距离
				maxDis: 0,
				titleLeft: 0,
				likeBoxFixed: '',
				activeItemStyle: '',
				listMinH: 0,
				currency: '¥',
				isFold: true,
				foodSortId: 0,
				showTagMask: false,
				// 设置底部foolist距离顶部的距离
				toTop_90: {

				},
				toTop_45: {
					paddingTop: '45px'
				},
				foodListStyle: this.foodSortList.length > 5 ? 'padding-top: 100px' : (this.foodSortList.length == 0 ? '' :
					'padding-top: 50px'),
				mainColor: '',
				// 附近好菜筛选
				dataList: [],
				hiddenData: [],
				currentScrollTop: 0,
				fixedTop: 0,
			}
		},
		computed: {
			maskTop() {
				let h = Math.ceil(this.foodSortList.length / 5) * 45 + 45 + this.topH;
				if (h > 290) {
					return 290;
				} else {
					return h - 15
				}
			}
		},
		mounted() {
			_this = this;
			this.handleListShow();
			common.getConfig(function(data) {
				console.log('获取config', data)
				_this.config = data
				// _this.mainColor = _this.config.config.mobile_head_color
				// _this.mainColorBg = `background-color:${_this.config.config.mobile_head_color} !important`
				// _this.mainColorFont = `color:${_this.config.config.mobile_head_color} !important`
				_this.mainColor = "#f60"
				_this.mainColorBg = 'background-color: #f60 !important'
				_this.mainColorFont = `color:${_this.config.config.mobile_head_color} !important`
			})
			getShopList();
			systemInfo = uni.getSystemInfoSync()
			_this.listMinH = `min-height:${systemInfo.windowHeight - 138}px`
			//渲染完再进行获取DOM信息
			_this.$nextTick(function() {
				_this.getRect()
			})
			common.changeCurrency(_this)
		},
		methods: {
			handleListShow() {
				let end = this.foodSortList.length;
				let itemMore = {
					"sort_id": "more",
					"sort_name": "更多"
				};
				if (this.foodSortList.length > 9 && this.isFold) {
					this.dataList = this.foodSortList.slice(0, 9);
					this.hiddenData = this.foodSortList.slice(10, end);
					this.dataList.push(itemMore);
				} else {
					this.dataList = this.foodSortList.slice(0, end);
				}

				// let m_sort_id = this.foodSortList[0].sort_id
				// if(m_sort_id){
				// 	this.handleTagClick(m_sort_id)
				// }			
			},
			// 查看更多tag
			handleTagClick(id) {
				console.log('m_id' + id);
				let end = this.foodSortList.length;
				if (id == 'more') {
					this.dataList = this.foodSortList.slice(0, end);
					// this.showTagMask = true;
				} else {

					// 设置选中
					this.dataList.map((item, index) => {
						if (item.sort_id == id) {
							if (item.selected == '1') {
								this.$set(this.dataList[index], 'selected', 0);
								this.foodSortId = 0;
							} else {
								this.$set(this.dataList[index], 'selected', 1);
								this.foodSortId = id;
							}
						} else {
							this.$set(this.dataList[index], 'selected', 0)
						}
					})
					if (this.dataList.length > 11) {
						this.hiddenData.map((item, index) => {
							this.$set(this.hiddenData[index], 'selected', 0)
						})
						this.dataList = this.dataList.slice(0, 9);
						this.hiddenData = this.dataList.slice(10, end);
						this.dataList.push({
							"sort_id": "more",
							"sort_name": "更多",
							selected: '0'
						});
					}
					getShopList('sort');
					this.tagMaskClick();
				}
			},
			// 关闭遮罩
			tagMaskClick() {
				this.showTagMask = false;
				this.isFold = true;
			},
			// 跳转到店铺
			handleFoodClick(data) { 
				const scUrl = "../shop_new/goodsDetail/goodsDetail"
				uni.navigateTo({
					url:`${scUrl}?store_id=${data.store_id}&product_id=${data.goods_id}`
				})
				// let store_id = common.getUrlParam(url,'store_id');
				// let sort_id = common.getUrlParam(url,'sort_id');
				// let goods_id = common.getUrlParam(url,'goods_id');
				// let goParams = store_id+'&sort_id=' + sort_id+'&goods_id='+goods_id;
				// common.gotoShopPage('shopDetail',goParams);
			},
			handlePromotionShopClick(url) {
				common.parseUrl(url, 'shop', false);
			},
			getRect(isFixed) {
				var query = this.createSelectorQuery()
				query.selectAll('.like-title-box, .like-title-box .item').boundingClientRect(function(res) {
					if (res && res.length > 0) {
						console.log()
						if (!_this.likeBoxFixed && !_this.likeBoxWidth) {
							_this.likeBoxWidth = `width:${res[0].width}px;`
							_this.likeBoxRect = res[0]
							titltItemRect = res.slice(1, res.length)
							let width = 0
							titltItemRect.map(item => {
								width = width + item.width
								return item
							})
							_this.maxDis = width - systemInfo.windowWidth
							_this.likeBoxRect.width = width
							_this.likeBoxRect.top = res[0].top + _this.currentScrollTop
							console.log('zyl	_this.likeBoxRect.top ', _this.likeBoxRect.top)
						}

					}
					// console.log('11111猜你喜欢宽度', systemInfo, res, _this.maxDis) 
				}).exec()
			},
			scrollHandle(e) {
				let scrollTop = e.detail.scrollTop
				_this.currentScrollTop = scrollTop
				// console.log('guessbox scrollTop', scrollTop)

				if (!_this.likeBoxRect) {
					return
				}
				if (!_this.likeBoxFixed && scrollTop >= _this.likeBoxRect.top - _this.topH) {
					_this.fixedTop = _this.likeBoxRect.top - _this.topH
					_this.likeBoxFixed =
						`position:fixed;top:${_this.topH}px;left:0;right:0;border-bottom:1px solid #f2f2f2;height: 45px;`
					// _this.activeItemStyle = `background: ${_this.config.config.mobile_head_color};`
				} else if (_this.likeBoxFixed && scrollTop < _this.likeBoxRect.top - _this.topH) {
					_this.fixedTop = 0
					_this.activeItemStyle = _this.likeBoxFixed = ''
				}
			},
			likeTitleScroll(e) {
				console.log('猜你喜欢标题滚动', e.detail.scrollLeft)
				titleX = e.detail.scrollLeft
			},
			calculateDis(direction) {
				let item = titltItemRect[_this.titleIndex]
				let windowCenter = systemInfo.windowWidth / 2
				let left = 0
				let itemCenter = item.left - titleX + item.width / 2
				if (itemCenter > windowCenter) {
					left = itemCenter - windowCenter + titleX
					if (left > 0) {
						titleX = _this.titleLeft = left < _this.maxDis ? left : _this.maxDis
						console.log('左移', titleX)
					}
				} else {
					left = windowCenter - itemCenter
					console.log('9999999999999', titleX, left)
					if (windowCenter - itemCenter > 0) {
						titleX = _this.titleLeft = titleX + left < 0 ? -titleX + left : 0,
							console.log('右移', titleX)
					}
				}
				console.log('_this.titleLeft', titleX)
				_this.titleLeft = titleX

			},
			touchStart(e) {
				console.log('滑动开始', e)
				e.preventDefault();
				startX = e.changedTouches[0].pageX
				startY = e.changedTouches[0].pageY
			},
			touchEnd(e) {
				e.preventDefault();
				let endX = e.changedTouches[0].pageX
				let endY = e.changedTouches[0].pageY
				let dx = endX - startX
				let dy = startY - endY

				//如果滑动距离太短
				if (Math.abs(dx) < 50 && Math.abs(dy) < 50) {
					return
				}

				let angle = Math.atan2(dy, dx) * 180 / Math.PI
				console.log('滑动结束', startX, startY, endX, endY, dx, dy, angle)
				if (angle >= -45 && angle < 45) {
					console.log('右滑 →')
					if (_this.titleIndex > 0) {
						_this.titleIndex--
						_this.selectType(_this.titleIndex)
						_this.calculateDis()
					}
				} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
					console.log('左滑 ←')
					if (_this.titleIndex < _this.title.length - 1) {
						_this.titleIndex++
						_this.selectType(_this.titleIndex)
						_this.calculateDis()
					}
				}

			},
			updateShopList() {
				if (_this.shopList[_this.titleIndex].pageLoading) {
					getShopList()
				}
			},
			selectType(titleIndex) {
				console.log('11111', titleIndex)
				_this.titleIndex = titleIndex
				_this.calculateDis()
				if (!_this.shopList[titleIndex]) {
					_this.shopList[titleIndex] = {
						page: 1
					}
					getShopList()
				}
				if (_this.fixedTop != 0) {
					console.log('_this.fixedTop', _this.fixedTop)
					_this.$emit('scrollListTop', _this.likeBoxRect.top)
				}
			},
			goUrl(e) {
				if (e.type == 'submit') {
					common.upFormid(e);
				}
				var pageTitle = e.currentTarget.dataset.url_title ? e.currentTarget.dataset.url_title : '';
				var url = e.currentTarget.dataset.url;
				common.parseUrl(url, '', false, pageTitle);
			}
		}
	}
	// 获取猜你喜欢列表
	const getShopList = (type) => {
		if (!_this.shopList[_this.titleIndex] || _this.shopList[_this.titleIndex].page == 1 || type == 'sort') {
			_this.shopList[_this.titleIndex] = {
				list: [],
				pageLoading: false,
				pageComplete: false,
				idStr: '',
				page: 1
			};
		}
		common.post('Home&a=plat_recommend', {
			lat: _this.location.lat,
			lng: _this.location.lng,
			page: _this.shopList[_this.titleIndex].page,
			shopIdStr: _this.shopList[_this.titleIndex].idStr,
			re_type: _this.title[_this.titleIndex].re_type,
			noTip: _this.title[_this.titleIndex].page == 1,
			sort_id: _this.foodSortId,
		}, data => {
			if (data.activity_list && data.activity_list.length > 0 && _this.shopList[_this.titleIndex].page == 1) {
				_this.shopList[_this.titleIndex].activity_list = data.activity_list;
			}
			if (data.list.length > 0) {
				let shopIdStr = '';
				if (_this.title[_this.titleIndex].re_type != 'shop_goods') {
					data.list = data.list.map(item => {
						if (item.business_label != "") {
							var arr = [];
							if (item.re_type == 'store') {
								arr[0] = item.business_label.indexOf('团') != -1 ? common.changeTxt('团') : '';
								arr[1] = item.business_label.indexOf('餐') != -1 ? common.changeTxt('餐') : '';
								arr[2] = item.business_label.indexOf('外') != -1 ? common.changeTxt('外') : '';
							} else {
								arr = item.business_label.split(',');
							}
							item.business_label = arr;
						} else {
							item.business_label = [];
						}
						item.label = item.label != '' ? item.label.split(',') : []
						if (item.re_type == 'group') {
							// 5折以下显示超值标签
							item.discount = (item.price / item.old_price).toFixed(2);
							item.discount = item.discount * 100;
							item.discount = item.discount > 0 && item.discount <= 50 || item.price == 0 && item.old_price > 0 ? true :
								false;
						}
						shopIdStr = shopIdStr + item.id + ','
						return item;
					});
				}
				if (type == 'sort') {
					// 切换发现好菜tag
					_this.shopList[_this.titleIndex].list = data.list;
				} else {
					_this.shopList[_this.titleIndex].list = _this.shopList[_this.titleIndex].list.concat(data.list)
				}
				shopIdStr = shopIdStr.slice(0, -1)
				_this.shopList[_this.titleIndex].idStr = _this.shopList[_this.titleIndex].idStr + shopIdStr
			}
			if (data.list.length < 10) {
				_this.shopList[_this.titleIndex].pageLoading = false
				_this.shopList[_this.titleIndex].pageComplete = true
			} else {
				_this.shopList[_this.titleIndex].pageLoading = true
				_this.shopList[_this.titleIndex].page++
			}
			_this.$forceUpdate();

		});
	};
</script>
<style lang="scss" scoped>
	.rel {
		position: relative;
	}

	.flex {
		display: flex;
	}

	.flex-center {
		align-items: center;
	}

	.flex-between {
		justify-content: space-between;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.border-b::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1rpx;
		right: 0;
		background: #e5e5e5;
		transform: scaleY(0.5);
	}

	.mb5 {
		margin-bottom: 5px;
	}

	.mt5 {
		margin-top: 5px;
	}

	.mr5 {
		margin-right: 5px;
	}

	.mb2 {
		margin-bottom: 2px;
	}

	.inline {
		display: inline-block;
	}


	.guess-box {
		position: relative;
		padding-top: 20rpx;
		width: 92%;
		padding-bottom: 2vh;
		&::after{
			content: "";
			position: absolute;
			top:-19vw;
			left: 50%;
			margin-left:-46vw;
			width: 92vw;
			height:24vw;
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: 92vw 24vw;
			}
		&::before{
			content: '';
			position: absolute;
			width:92vw;
			height:20vw;
			bottom:-6vw;
			left:50%;
			margin-left:-46vw;
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: 92vw 20vw;
			}
	}

	.promotion-shop {
		width: 96%;
		margin: 4vw auto;

		.desc {
			line-height: 24px !important;
		}
	}

	/* 猜你喜欢标题样式 */
	.like-title-wrapper {
		width: 100%;
		padding-top: 4vw;
		padding-bottom:4vw;
		z-index: 999;

		&.fixed {
			top: 0 !important;
			background-color: #fff;
		}
	}

	.like-title-box {
		display: flex;
		padding: 0 2vw;
	}

	.like-title-box .item {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		position: relative;
		padding-bottom: 20px;

		&.active:after {
			content: '';
			position: absolute;
			left: 50%;
			margin-left: -5vw;
			bottom: 0;
			width: 10vw;
			height: 2px;
			background-color: #fff;
		}
	}

	.delivery-way {
		background-color: #f60;
		color: #fff;
	}

	.like-title-box .item .title {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		width: 100%;
	}

	.like-title-box .item .desc {
		font-size: 12px;
		padding: 2px;
	}

	.like-title-box .item.active .title,
	.like-title-box .item.active .desc {
		color: #fff;
	}

	.goods-box {
		margin-left: 20rpx;
	}

	.goods-item {
		width: calc(33.333% - 20rpx);
		margin-top: 20rpx;
		margin-right: 20rpx;
		overflow: hidden;
		position: relative;
	}

	.brand-box .goods-item:nth-child(2) {
		margin-right: 0;
	}

	.goods-item:last-child {
		margin-right: 0;
	}

	.goods-item .img-box {
		position: relative;
	}

	.goods-item .img-box .icon {
		position: absolute;
		bottom: 0;
		left: 0;
		background: linear-gradient(to right, #ffb269, #ff4437);
		color: #fff;
		border-radius: 0 10px 0 0;
		font-size: 11px;
		padding: 1px 5px;
	}

	.goods-item image {
		width: 100%;
		height: 111.66px;
		border-radius: 2px;
		display: block;
	}

	.goods-item .name,
	.goods-item .desc {
		font-size: 14px;
		font-weight: 500;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100%;
		overflow: hidden;
		margin-top: 2px;
	}

	.goods-item .desc {
		font-size: 12px;
		font-weight: 400;
	}

	.goods-item .price-box {
		color: red;
		font-size: 14px;
		margin-top: 2px;
	}

	.goods-item .old-price {
		color: #999;
		margin-left: 5px;
		text-decoration: line-through;
		font-size: 12px;
	}

	.brand-box {
		margin-left: 20rpx;
		flex-wrap: wrap;
	}

	.brand-img {
		width: calc(66.66% - 20rpx);
		margin-top: 20rpx;
		margin-right: 20rpx;
	}

	.brand-img image {
		width: 100%;
		height: 176.66px;
		display: block;
	}

	.shop-item {
		padding: 20rpx;
		display: flex;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.shop-item.border-b::after {
		left: 20rpx;
	}

	.list-wrapper {
		margin-top: 2vw;
		box-sizing: border-box;
	}

	.list-wrapper .list-item:last-child .shop-item.border-b:last-child::after {
		height: 0;
	}

	.shop-item {
		display: flex;
		flex-wrap: wrap;
	}

	.shop-item .shop-img {
		width: 50%;
		border-radius: 5px;
		margin-right: 20rpx;
		position: relative;
	}

	.shop-item .shop-img image {
		width: 100%;
		height: 100%;
	}

	.shop-item .info-box {
		position: relative;
		width: calc(100% - 102px - 20rpx);
		min-height: 80px;
	}

	.shop-item .small {
		color: #333;
		font-size: 12px;
	}

	.shop-item .small.bg {
		background: #f4f4f4;
		margin-right: 5px;
		margin-bottom: 5px;
		padding: 0 20rpx;
	}

	.shop-item .name-box {
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.shop-item .name-box.food {
		justify-content: flex-start;
	}

	.shop-item .name-box.food .icon {
		margin-left: 5px;
		font-size: 12px;
		border-radius: 3px;
		align-self: center;
		color: #fff;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		background: linear-gradient(to right, #facd7a, #faa300);
	}

	.shop-item .name {
		font-size: 16px;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop-item .info-box .line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		color: #666;
	}

	.shop-item .info-box .line .advance {
		margin-bottom: 5px;
		font-size: 11px;
		margin-top: 4px;
	}

	.shop-item .info-box .line .advance .advance_left {
		color: #fff;
		padding: 1px 4px;
		border-radius: 2px 0 0 2px;
	}

	.shop-item .info-box .line .advance .advance_right {
		border: 1px solid #fff;
		padding: 0 4px;
		border-radius: 0 2px 2px 0;
	}

	.shop-item .distance {
		white-space: nowrap
	}

	.shop-item .info-box.group .name {
		overflow: static;
		flex-grow: 1;
		height: 25px;
	}

	.shop-item .info-box.group .name .mr5 {
		max-width: calc(100% - 60px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}

	.shop-item .info-box.group .name .food-icon {
		position: relative;
		top: -4px;
		margin-left: 0;
	}

	.shop-item .gray {
		color: #bbb;
	}

	.shop-item .red {
		color: #f6503e;
	}

	.shop-item .orange {
		color: #f17019;
		font-weight: bold;
	}

	.shop-item .green {
		color: #06c1ae;
		border: 1px solid #06c1ae;
		margin-left: 5px;
		font-size: 11px;
		padding: 1px 3px;
		border-radius: 2px;
	}

	.shop-item .bold {
		font-weight: bold;
	}

	.shop-item .right {
		position: absolute;
		right: 0;
	}

	.shop-item .bottom {
		position: absolute;
		bottom: 0;
	}

	.shop-item .desc {
		margin-bottom: 3px;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop-item .price-box {
		line-height: 1;
		align-items: baseline;
	}

	.shop-item .now-price {
		margin-right: 5px;
		font-size: 18px;
		font-weight: 500;
	}

	.shop-item .discount-icon {
		display: flex;
		flex-wrap: wrap;
	}

	.shop-item .discount-icon .icon {
		margin-right: 5px;
		margin-bottom: 5px;
		font-size: 11px;
		padding: 0 3px;
		border-radius: 2px;
		color: #ce847f;
		border: 1rpx solid #f4cfcc;
		background: #fff4f2;
	}

	.shop-item .store-tag {
		height: 20px;
		white-space: nowrap;
	}

	.shop-item .store-tag text {
		display: inline-block;
		width: 20px;
		height: 100%;
		background: pink;
		font-size: 14px;
		vertical-align: top;
		color: #fff;
		margin-left: 5px;
		text-align: center;
		line-height: 20px;
	}

	.shop-item .store-tag text.group-tip {
		background: #74da1c;
	}

	.shop-item .store-tag text.food-tip {
		background: #fc5e03;
	}

	.shop-item .store-tag text.appoint-tip {
		background: #f8c717;
	}

	.shop-item .img-tip {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		padding: 0 5px;
		font-size: 12px;
		background: linear-gradient(to right, rgb(247, 105, 57), rgb(255, 60, 0));
		border-radius: 0 10px 0 5px;
	}

	.shop-item .icon-star {
		color: #ffc900;
		font-size: 12px;
		margin-right: 5px;
	}

	.shop-item .name-box .food-icon {
		background: linear-gradient(to right, rgb(243, 137, 101), rgb(255, 60, 0));
		color: #fff;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		margin-left: 5px;
		border-radius: 3px;
		display: inline-block;
	}

	.shop-item .score {
		margin-right: 10px;
		font-size: 12px;
	}

	.shop-item .sale-tip {
		background: linear-gradient(to right, rgb(247, 105, 57), rgb(255, 60, 0));
		color: #fff;
		font-size: 12px;
		margin-right: 5px;
		padding: 2px 5px;
		border-radius: 2px;
	}

	.shop-item .news,
	.shop-item .news .news-swiper {
		margin: 0;
		font-size: 12px;
		height: 20px;
	}

	.loading-tip {
		text-align: center;
		line-height: 30px;
		color: #999;
		font-size: 14px;
		padding-bottom: 10px;
	}

	/* 发票 */
	.invoice {
		color: #06c1ae;
		border: 1rpx solid #c5f3ef;
	}

	/* 平台首单优惠 平台优惠 */
	.system_newuser,
	.system_minus {
		color: #aa8023;
		border: 1rpx solid #f3e5c6;
	}

	/* 打折 部分商品限时优惠  部分商品分类折扣优惠 配送费优惠 店铺首单优惠 店铺优惠 */
	.discount,
	.delivery_free,
	.isdiscountgoods,
	.isdiscountsort,
	.delivery,
	.newuser,
	.minus {
		color: #ff3e4a;
		border: 1rpx solid #fce5e7;
	}

	.discount-icon>view {
		margin-right: 5px;
		margin-bottom: 5px;
		font-size: 11px;
		padding: 0 3px;
		border-radius: 2px;
	}

	.foodList {
		display: flex;
		flex-wrap: wrap;
		padding: 10upx 20upx;
	}

	.food-content {
		width: 32%;
		margin-left: 2%;
		margin-bottom: 20upx;
	}

	.food-content:nth-child(3n-2) {
		margin-left: 0;
	}

	.tag-show-mask {
		position: absolute;
		left: 0;
		right: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 998;
	}

	.food-sort-list {
		position: fixed;
		// top: 85px;
		left: 0px;
		right: 0px;
		border-bottom: 1px solid rgb(242, 242, 242);
		/* height: 44px; */
		z-index: 999;
	}

	.tag {
		position: absolute;
		left: 0;
		right: 0;
		/* top:4px; */
		padding: 10upx 20upx;
		background-color: #FFFFFF;
		max-height: 200px;
		overflow-y: scroll;
		/* z-index: 99; */
	}

	.grid {
		display: flex;
		flex-wrap: wrap;

	}

	.grid.grid-square {
		overflow: hidden;
		padding: 0 10px;
	}

	.grid.grid-square>view {
		margin-right: 20upx;
		margin-bottom: 20upx;
		border-radius: 6upx;
		position: relative;
		overflow: hidden;
	}

	.grid.col-5.grid-square>view {
		/* padding-bottom: calc((100% - 80upx)/5); */
		height: 60upx;
		line-height: 60upx;
		vertical-align: middle;
		width: calc((100% - 80upx)/5);
	}

	.grid.col-5.grid-square>view:nth-child(5n) {
		margin-right: 0;
	}

	.grid.col-5>view {
		width: 20%;
		text-align: center;
		background-color: #F2F2F4;
		font-size: 20upx;
		color: #666;
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.grid.col-5>view>text {
		padding: 0 10upx;
	}

	.desc-delivery {
		display: flex;
		justify-content: space-between;
		padding: 8upx 0;
	}

	.desc-delivery .desc-2 {
		margin-right: 10upx;
	}

	.desc-delivery .desc-2 .delivery-way {
		border-radius: 4upx;
		padding: 2upx 6upx;
		// color:  #06c1ae;
		// border: 1upx solid  #06c1ae;
		font-size: 11px;
	}
</style>
